<template>
  <div>
    <t-header></t-header>
    <el-alert
      title="当前网站图片资源过多服务器采用的是1Mbps，请耐心等待，如遇图片一直在加载的情况，刷新即可"
      type="info"
      center
      show-icon>
    </el-alert>
    <t-focus></t-focus>
    <!-- 热门 -->
    <div class="hots">
      <div class="w">
        <div class="hots-dt">版主推荐</div>
        <div class="hots-dd" v-if="hotsData != ''">
          <div class="dd-item" :key="item" v-for="item in 8">
            <img
            @click="jump(hotsData[0]._id)"
            v-if="item == 1"
            :src="`http://47.105.157.158:3000/images/cat/${hotsData[0].cat}/${hotsData[0].path[item]}`">
            <img
            v-if="item == 2"
            @click="jump(hotsData[1]._id)"
            :src="`http://47.105.157.158:3000/images/cat/${hotsData[1].cat}/${hotsData[1].path[item]}`">
            <img
            v-if="item == 3"
            @click="jump(hotsData[2]._id)"
            :src="`http://47.105.157.158:3000/images/cat/${hotsData[2].cat}/${hotsData[2].path[item]}`">
            <img
            v-if="item == 4"
            @click="jump(hotsData[3]._id)"
            :src="`http://47.105.157.158:3000/images/cat/${hotsData[3].cat}/${hotsData[3].path[item]}`">
            <img
            v-if="item > 4"
            @click="jump(hotsData[3]._id)"
            :src="`http://47.105.157.158:3000/images/cat/${hotsData[3].cat}/${hotsData[3].path[item]}`">
          </div>
        </div>
      </div>
    </div>

   
    <t-selected
      :key="index"
      v-for="(item, index) in selectList"
      :selectData="item"
      @showPrivece="showPrivece($event)"
    ></t-selected>

   
    <!-- 预览 -->
  <t-privece 
  @closePrivece="closePrivece($event)"
  @setCurrentPriveceImg="setCurrentPriveceImg($event)"
  @newCurrentDianzanData="newCurrentDianzanData($event)"
  @newPriveceData="newPriveceData($event)"
  @setGuanzhuData="setGuanzhuData($event)"
  :currentPriveceData="PriveceData"
  v-if="isShowPrivece"></t-privece>
    
  </div>
</template>

<script>
import { ref, onMounted, provide } from "@vue/composition-api";
import Header from "../components/global/Header";
import Focus from "../components/global/Focus";
import axios from "axios";
import Selected from '../components/global/Selected';
import Privece from '../components/global/Privece';
export default {
  components: {
    "t-header": Header,
    "t-focus": Focus,
    't-selected': Selected,
    't-privece': Privece
  },
  setup(props, context) {
    // axios配置
    axios.defaults.baseURL = "http://47.105.157.158:3000";

    // 生命周期钩子
    onMounted(() => {
      // 获取轮播图
      getFocus();
      getSelectList();
      getHotsList();
    });

    // 轮播图
    const focus = ref([]);
    // 把轮播图数据传递给focus子组件
    provide("focus", focus);
    // 获取轮播图
    const getFocus = async function() {
      let { data: res } = await axios.get("/get/focus");
      if (res.status != 200)
        return context.parent.$message.error("获取轮播图数据失败，请刷新后重试");
      focus.value = res.focus;
    };

    // 获取精选数据
    // 精选数据
    const selectList = ref('');
    const getSelectList = async function () {
      let { data: res } = await axios.get('/get/select/all');
      if (res.status != 200)
        return context.parent.$message.error('获取精选数据失败，请刷新后重试');
      selectList.value = res.selectList;
    }

    // 显示跟隐藏预览
    const isShowPrivece = ref(false);
    // 预览的数据
    const PriveceData = ref('');
    // 获取预览数据
    const showPrivece = function (e) {
      PriveceData.value = e;
      isShowPrivece.value = true;
    }
    // 关闭预览窗口
    const closePrivece = function (e) {
      isShowPrivece.value = e;
    }

    // 修改当前的预览数据
    const setCurrentPriveceImg = function (e) {
      PriveceData.value = e;
    }

    // 更新点赞数据
    const newCurrentDianzanData = function (e) {
      PriveceData.value = e;
    } 

    // 更新评论数据
    const newPriveceData = function (e) {
      PriveceData.value = e;
    } 

    // 更新关注数据
    const setGuanzhuData = function (e) {
      PriveceData.value.user = e;
    }

    // 热门推荐数据
    const hotsData = ref('');
    // 获取热门推荐
    const getHotsList = async function () {
      let { data: res } = await axios.get('/get/albumall/name');
      if (res.status != 200)
        return context.parent.$message.error('获取热门推荐数据失败，遇到异常，请刷新后重试');
        hotsData.value = res.albums;
    }

    // 跳转
    const jump = function (id) {
      context.parent.$router.push(`/album/${id}`);
    }

    const methods = 
    {
      showPrivece, 
      closePrivece, 
      setCurrentPriveceImg, 
      newCurrentDianzanData,
      newPriveceData,
      setGuanzhuData,
      jump
      
    }

    return {
      ...methods,
      selectList,
      isShowPrivece,
      PriveceData,
      hotsData
    }
  }
};
</script>

<style lang="less" scoped>
.hots {
  margin-top: 60px;
  .hots-dt {
    font-size: 24px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 20px;
  }
  .hots-dd {
    display: flex;
    justify-content: space-between;
    .dd-item {
      width: 180px;
      overflow: hidden;
      img {
        width: 100%;
        height: 120px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all .6s;
        &:hover {
          transform: scale(1.1);
        }
      }
      span {
        color: #262626;
      }
    }
  }
}



</style>